<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="close"
    cancelText="关闭">
    <a-card :bordered="false">
      <div style="margin-top: -20px">
        <div style="margin-bottom: 10px">
          <span>ID: {{userObj.userId}}</span>
          <span style="margin-left: 20px">昵称：{{userObj.userName}}</span>
        </div>
        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          class="j-table-force-nowrap"
          @change="handleTableChange">
          <template slot="fileSlot" slot-scope="text,record">
          <span v-if="record.type=='2'" style="position: relative;margin-left: 5px" @click="openVideo(text)"  >
            <img :src="text+'?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0'" :style="{width: '30px',height: '50px'}">
            <img style="width: 25px;height: 25px;position:absolute;z-index: 1;top:50%;left: 50%;transform: translate(-50%, -50%)" src="~@/assets/play.png">
          </span>
            <span v-else>
            <a @click="() => viewFile(text)">查看图片</a>
          </span>
          </template>

          <span slot="action" slot-scope="text, record">
            <a @click="openComment(record)">查看评论</a>
          </span>

        </a-table>
      </div>

      <!-- 视频播放器 -->
      <a-modal v-model="videoVisible" :width="800" @cancel="videoClose" :footer="null" destroyOnClose>
        <div style="margin-top: 20px;height: 1000px">
          <vue-core-video-player
            :loop="false"
            autoplay="false"
            style="width: 100%;height: 100%"
            :src="videoUrl"
          ></vue-core-video-player>
        </div>
      </a-modal>

      <CommunityCommentList ref="CommunityCommentList"></CommunityCommentList>
      <ViewFileModel ref="ViewFileModel"></ViewFileModel>
    </a-card>
  </j-modal>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import ViewFileModel from '@/views/xiny/common/ViewFileModel'
  import CommunityCommentList from './CommunityCommentList'

  export default {
    name: 'CommunityInfoList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      ViewFileModel,
      CommunityCommentList
    },
    data () {
      return {
        title:'动态列表',
        width:1200,
        visible: false,
        disableSubmit: true,

        description: '动态管理页面',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'动态内容',
            align:"center",
            dataIndex: 'textContent'
          },
          {
            title:'动态图片/视频',
            align:"center",
            dataIndex: 'fileUrl',
            scopedSlots: { customRender: 'fileSlot' }
          },
          {
            title:'审核状态',
            align:"center",
            dataIndex: 'auditStatus_dictText'
          },
          {
            title:'发布时间',
            align:"center",
            dataIndex: 'createTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/community/communityInfo/list",
        },
        dictOptions:{},
        superFieldList:[],

        userObj:{},
        videoVisible:false,
        videoUrl:"",
      }
    },
    created() {
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      //打开评论
      openComment(record){
        this.$refs.CommunityCommentList.open(record.id);
      },

      //打开
      open (obj) {
        this.visible=true;
        this.queryParam.userId=obj.userId;
        this.userObj=obj;
        this.loadData(1);
      },
      //关闭
      close () {
        this.visible = false;
      },

      //关闭播放器
      videoClose(){
        this.videoUrl = "";
        this.videoVisible = false;
      },
      //打开
      openVideo(url){
        this.videoUrl = url;
        this.videoVisible = true;
      },

      //查看文件
      viewFile(fileUrl){
        var url=[];
        if(fileUrl){
          var jsonArray = JSON.parse(fileUrl);
          jsonArray.forEach((item,index)=>{
            url.push(item.imgUrl);
          })
        }
        this.$refs.ViewFileModel.fileUrl=url;
        this.$refs.ViewFileModel.title="查看图片";
        this.$refs.ViewFileModel.visible=true;
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
